<template>
	<view>
		<!-- navbar -->
		<u-navbar leftText=" " title="发布项目" :safeAreaInsetTop="true" :placeholder="true">
			<view class="u-nav-slot" slot="left">
			</view>
		</u-navbar>
		<view class="minBox">
			<u--form :model="form" ref="uForm" :rules="rules" labelWidth="100">
				<!-- 服务名称 -->
				<view class="info">
					<u-form-item label="服务名称" prop="name">
						<input type="text" placeholder="请填写服务名称" v-model="form.name" placeholder-class="class">
					</u-form-item>
				</view>

				<!-- 服务类型 -->
				<view class="info">
					<u-form-item label="服务类型">
						<view class="gender">
							<view class="item" @click="form.service_type =1">
								<image v-if="form.service_type ===1"
									src="http://qiniu.suboshimuying.cn/static/cart/check.png" mode=""></image>
								<image v-else src="http://qiniu.suboshimuying.cn/static/order/icon24@2x.png" mode="">
								</image>
								上门
							</view>
							<view class="item" @click="form.service_type =2">
								<image v-if="form.service_type ===2"
									src="http://qiniu.suboshimuying.cn/static/cart/check.png" mode=""></image>
								<image v-else src="http://qiniu.suboshimuying.cn/static/order/icon24@2x.png" mode="">
								</image>
								到店
							</view>
						</view>
					</u-form-item>
				</view>

				<!-- 上门人员 -->
				<template v-if="form.service_type ===1">
					<view class="info">
						<u-form-item label="上门人员" prop="call_pel">
							<input type="text" placeholder="请填写上门人员姓名" v-model="form.call_pel"
								placeholder-class="class">
						</u-form-item>
					</view>
				</template>


				<!-- 服务价格 -->
				<view class="info">
					<u-form-item label="服务价格" prop="goods_price">
						<input type="text" placeholder="请填写服务价格" v-model="form.goods_price" placeholder-class="class">
					</u-form-item>
				</view>

				<!-- 所在城市 -->
				<view class="info">
					<u-form-item label="所在城市" prop="newarea_id">
						<view class="region" @click="areaClick">
							<input type="text" placeholder="请选择您当前所在城市" :value="areaName" placeholder-class="class"
								disabled>
							<image src="http://qiniu.suboshimuying.cn/static/user/ic-arrow@2x.png" mode=""></image>
						</view>
					</u-form-item>
				</view>

				<!-- 预约时间 -->
				<view class="info">
					<u-form-item label="预约时间" prop="server_time">
						<view class="region" @click="timeClick">
							<input type="number" placeholder="请选择预约时间" v-model="form.server_time"
								placeholder-class="class" disabled>
							<image src="http://qiniu.suboshimuying.cn/static/user/ic-arrow@2x.png" mode=""></image>
						</view>
					</u-form-item>
				</view>

				<!-- 门店地址 -->
				<view class="info">
					<u-form-item label="门店地址" prop="adress_det">
						<input type="text" placeholder="请填写您的具体地址" v-model="form.adress_det" placeholder-class="class">
					</u-form-item>
				</view>

				<!-- 详情 -->
				<view class="info">
					<u-form-item label="详情" prop="detail_text">
						<input type="text" placeholder="文字描述您的项目" v-model="form.detail_text" placeholder-class="class">
					</u-form-item>
				</view>
			</u--form>
		</view>
		<!-- 上传图片 -->
		<view class="uploadBox">
			<view class="title">上传图片更吸引用户噢（最多上传10张）</view>
			<view class="upload">
				<ImgUpload @callback="callback1" maxCount="10" />
			</view>
		</view>
		<!-- 保存按钮 -->
		<view class="btnBox" @click="submit">
			提交申请
		</view>
		<BtnTabbar :value="1"></BtnTabbar>
	</view>
</template>

<script>
	import BtnTabbar from "@/components/BtnTabbar/BtnTabbar.vue"
	import ImgUpload from '@/components/ImgUpload/ImgUpload.vue'
	export default {
		components: {
			BtnTabbar,
			ImgUpload
		},
		data() {
			return {
				form: {
					name: null, //项目名称
					service_type: 1, //服务类型: 1 = 上门,2 = 到店
					call_pel: null, //上门人员
					newarea_id: null, //所在城市id
					goods_price: null, //服务价格
					server_time: null, //预约时间
					adress_det: null, //门店地址
					detail_text: null, //商品详情
					goods_images: null, //商品图片
				},
				areaName: "", //所在城市
				imgUrl: [], //图片列表
				rules: {
					name: [{
						required: true,
						message: '请输入服务名称',
						trigger: ['blur', 'change']
					}],
					call_pel: [{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// console.log(value);
							if (this.form.service_type === 1) {
								return value === null ? false : true;
							} else {
								return true;
							}
						},
						message: '请输入上门人员',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					newarea_id: [{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// console.log(value);
							return value === null ? false : true;
						},
						message: '请选择您当前所在城市',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					goods_price: [{
						required: true,
						message: '请输入服务价格',
						trigger: ['blur', 'change']
					}],
					server_time: [{
						required: true,
						message: '请选中预约时间',
						trigger: ['blur', 'change']
					}],
					adress_det: [{
						required: true,
						message: '请填写门店地址',
						trigger: ['blur', 'change']
					}],
					detail_text: [{
						required: true,
						message: '请输入详情',
						trigger: ['blur', 'change']
					}],
				},
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules); //自定义验证规则
		},
		onLoad() {
			uni.hideTabBar()
		},
		methods: {
			// 地址点击
			areaClick() {
				uni.navigateTo({
					url: `/subPages/city/city`,
					events: {
						areaBack: data => {
							this.areaName = data.name
							this.form.newarea_id = data.id
							// console.log(data);
						}
					}
				})
			},
			// 时间点击
			timeClick() {
				uni.navigateTo({
					url: `/subPages/optionsChange/optionsChange?type=${1}&userType=${1}&value=${this.form.server_time}`,
					events: {
						timeBack: data => {
							this.form.server_time = data.map(item => item.time).join(',')
							// console.log(data);
						}
					}
				})
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					if (this.imgUrl.length === 0) {
						uni.$u.toast('请上传图片')
					} else {
						uni.$u.toast('校验通过')
						this.form.goods_images = this.imgUrl.map(item => item.url).join(',')
						uni.$u.throttle(this.merchNewProject, 1000)
						// console.log(this.form);
					}
				}).catch(errors => {
					uni.$u.toast('请正确填写信息')
				})
			},
			// 上传回调
			callback1(e) {
				this.imgUrl = e
				// console.log(e);
			},
			// 新建项目
			async merchNewProject() {
				let {
					code,
					msg
				} = await this.$api.merchNewProject(this.form)
				this.form.name = null //项目名称
				this.form.service_type = 1 //服务类型: 1 = 上门,2 = 到店
				this.form.call_pel = null //上门人员
				this.form.newarea_id = null //所在城市id
				this.form.goods_price = null //服务价格
				this.form.server_time = null //预约时间
				this.form.adress_det = null //门店地址
				this.form.detail_text = null //商品详情
				this.form.goods_images = null //商品图片
				this.areaName = ""
				this.imgUrl = []
				uni.$emit('imgListClear')
				this.$refs.uForm.clearValidate()
				uni.$u.toast(msg)
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.u-form-item {
		width: 100%;
		padding: 0;
	}

	.u-navbar__content__title {
		color: rgba(0, 0, 0, 0.8);
		font-size: 32rpx;
		font-weight: 700;
	}
</style>
<style lang="scss" scoped>
	.minBox {
		// padding: 0 32rpx 0;

		.info {
			// padding: 0 32rpx 0;
			width: 100%;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			background-color: #fff;
			padding: 8rpx 32rpx;
			// border-bottom: 1rpx solid rgba(151, 151, 151, 0.1);

			input {
				flex: 1;
				color: rgba(0, 0, 0, 1);
			}

			.class {
				color: rgba(0, 0, 0, 1);
				font-size: 28rpx;
			}
		}
	}

	.btnBox {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 70%;
		margin: 60rpx auto;
		border: 1rpx solid #826FFF;
		height: 84rpx;
		border-radius: 600rpx;
		color: rgba(128, 110, 254, 1);
		font-size: 32rpx;
		font-weight: 700;
	}

	.region {
		display: flex;
		justify-content: space-between;
		width: 100%;
		color: rgba(0, 0, 0, 0.4);
		font-size: 28rpx;

		image {
			margin-top: 8rpx;
			width: 18rpx;
			height: 24rpx;
		}
	}

	.gender {
		display: flex;
		align-items: center;
		align-items: center;

		.item {
			margin-right: 36rpx;
			display: flex;
			align-items: center;
			align-items: center;
		}

		image {
			margin-right: 8rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.uploadBox {
		box-sizing: border-box;
		background-color: #fff;
		padding: 8rpx 16rpx;
		// border-bottom: 1rpx solid rgba(151, 151, 151, 0.1);

		.title {
			color: rgba(0, 0, 0, 1);
		}

		.upload {
			margin-top: 16rpx;
			display: flex;
			justify-content: space-between;
		}
	}
</style>
